<template>
    <div min-width="1200px">
      <page-top :active="'1'" :logoPic="logoPic"></page-top>
      <el-carousel :interval="5000" arrow="never" height="640px" trigger="click">
        <el-carousel-item v-for="(item,index) in data.banner" :key="index" style="text-align:center">
          <img :src="item.img" alt="" style="width:1920px;width:100%; height:100%;object-fit:cover;">
        </el-carousel-item>
      </el-carousel>
      <div style="width:100%;background:#333333;color:#ffffff;">
        <ul class="carouselButton" style="width:1200px;background:#333333;">
          <li v-for="(item,index) in data.banner" :key="index" v-if="index<5" style="overflow:hidden">
            <span style="font-size:16px">{{item.title}}</span>
            <p style="font-size:14px;color:#cccccc">{{item.content}}</p>
          </li>
        </ul>
      </div>
      
      
      <main-top></main-top>
      <videoCom :video="data.video"></videoCom>
      <div style="padding:30px 0 0 0;background:#f5f5f5;margin-bottom:20px">
        <h3 style="text-align:center;font-size:28px;padding:15px 0;font-weight:100;color:#333333">公司动态</h3>
        <our-dynamic :ourDynamics="data.company_dynamics" style="margin-bottom:40px;margin-top:30px"></our-dynamic>
        <our-message :ourMessage="data.our_message"></our-message>
      </div>
      <home-acticle :data2="data2"></home-acticle>
      <home-goods :data2="data3"></home-goods>
      <register-num style="" :registerNum="data.register"></register-num>
      <h3 style="text-align:center;font-size:28px;padding:15px 0;font-weight:100;color:#333333">合作伙伴</h3>
      <partner :partners='data.partener' style=""></partner>
      <page-bottom :napinAddress="data.register.address"></page-bottom>
    </div>
</template>

<script>
import pageTop from "@/components/common/pageTop";
import pageBottom from "@/components/common/pageBottom.vue";
import partner from "@/components/home/partner.vue";
import registerNum from "@/components/home/registerNum.vue";
import mainTop from "@/components/home/mainTop.vue";
import videoCom from "@/components/home/videoCom.vue";
import OurMessage from "@/components/home/ourMessage.vue";
import homeActicle from '@/components/home/getActicle.vue';
import homeGoods from '@/components/home/getGoods.vue';
import ourDynamic from '@/components/home/ourDynamic.vue';
import request from '@/request/index.js';

export default {
  name: "Home",
  components: {
    'PageTop': pageTop,
    'PageBottom': pageBottom,
    'Partner': partner,
    'RegisterNum':registerNum,
    'mainTop':mainTop,
    'videoCom':videoCom,
    'OurMessage':OurMessage,
    'homeActicle':homeActicle,
    'homeGoods':homeGoods,
    'ourDynamic':ourDynamic,
  },
  data() {
    return {
      data: {},
      page:1,
      data2:{},
      data3:{},
      logoPic:"",
      loading:{},
    };
  },
  methods: {
    clickBanner:function(i){
      var carouselButton=document.getElementsByClassName('el-carousel__button');
      for(var j=0;j<carouselButton.length;j++){
        if(i==j){
          carouselButton[i].click();
        }
        
      }

    },
    getActicle:function(id,page){
      request.getActicle(this,id,page);
    },
    getGoods:function(id,page){
      request.getGoods(this,id,page);
    }
  },
  created(){
    this.loading=this.$loading({
      lock: true,
      // text: 'Loading',
      // spinner: 'el-icon-loading',
      background: 'rgba(255, 255, 255, 0.6)',
      target: document.querySelector('body'),
      
    });
  },
  mounted() {
    request.home(this);
    request.getActicleList(this);
    request.getGoodsList(this);
  }
};
</script>

<style lang="scss">
.el-loading-spinner .path{
  stroke: red!important;
}
.imgHomeBanner{
  background-position: center center;
  background-size: 1920px
}
// .el-carousel__indicators{
//   display: none!important;
// }
.carouselButton{
     overflow: hidden;
     width:1200px;
     margin:0 auto;
    li{
      float:left;
      width:240px;
      height:140px;
      border-left:1px solid #999999;
      padding:39px 49px 0 49px;
      box-sizing: border-box;
      line-height: 2em;
      cursor: pointer;
    }
    li:hover{
      background:#444444;
    }
    li:last-child{
      border-right:1px solid #999999;

    }
  }

.cardLists{
 

  
    .el-card__body{
        padding: 0px!important;
    }
}
</style>
